<template>
  <view class="container">
    <view class="bg-sear">
      <view class="scrolltop">
        <view class="section" @tap="toSearchPage">
          <image src="@/static/images/icon/search.png" class="search-img" />
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- swiper -->
      <swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
        :indicator-active-color="indicatorActiveColor + ' '" :circular="true" class="pic-swiper" indicator-dots
        previous-margin="10rpx" next-margin="10rpx">
        <block v-for="(item, index) in Ad" :key="index">
          <swiper-item class="banner-item">

            <image :src="item.imgUrl" :data-categoryId="item.categoryId" :data-title="item.title" :data-link="item.link"
              class="banner" @tap="toAdPage" />

          </swiper-item>
        </block>
      </swiper>
      <!-- end swiper -->

      <view class="cat-item">
        <view class="item" data-sts="1" data-title="最新发布" data-categoryId="0" @tap="toClassifyPage">
          <image src="@/static/images/icon/newProd.png" />
          <text>最新发布</text>
        </view>
        <view class="item" data-sts="2" data-categoryId="1" data-title="苹果手机" @tap="toClassifyPage">
          <image src="@/static/images/icon/pingguo.png" />
          <text>苹果手机</text>
        </view>
        <view class="item" data-sts="3" data-categoryId="2" @tap="toClassifyPage">
          <image src="@/static/images/icon/huawei.png" />
          <text>华为手机</text>
        </view>
        <view class="item" data-sts="4" data-categoryId="3" data-title="小米手机" @tap="toClassifyPage">
          <image src="@/static/images/icon/icon-xiaomiguishu.png" />
          <text>小米手机</text>
        </view>
      </view>
    </view>

    <view class="updata">

      <!-- 商城热卖 -->
      <view class="hot-sale">
        <view class="title">
          <text>猜你喜欢</text>
          <!-- <view
              @tap="toClassifyPage"
            >
              <text class="more">
                更多
              </text>
              <text class="arrow" />
            </view> -->
        </view>
        <view class="hotsale-item-cont">
          <block v-for="(goods, index2) in goodsList" :key="index2">
            <view class="prod-items" :data-prodid="goods.id" @tap="toProdPage">
              <view class="hot-imagecont">
                <img-show :src="goods.picture" :class-list="['hotsaleimg']" />
              </view>
              <view class="hot-text">
                <view class="hotprod-text">
                  {{ goods.title }}
                </view>
                <view class="prod-info">
                  {{ goods.storage }}
                </view>
                <view class="prod-text-info">
                  <view class="price">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(goods.price)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(goods.price)[1] }}
                    </text>
                  </view>
                  <!--    <image
                      src="@/static/images/tabbar/basket-sel.png"
                      class="basket-img"
                    /> -->
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>

    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const wxs = number()
  const indicatorColor = ref('#d1e5fb')
  const indicatorActiveColor = ref('#1b7dec')
  const autoplay = ref(true)
  const interval = ref(2000)
  const duration = ref(1000)
  const Ad = ref([])
  const news = ref([])
  const taglist = ref([])
  const goodsList = ref([])
  const updata = ref(true)

  onLoad(() => {
    getAllData()
  })
  onShow(() => {
    // #ifdef MP-WEIXIN
    uni.getSetting({
      success(res) {
        if (!res.authSetting['scope.userInfo']) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    // #endif
  })

  onPullDownRefresh(() => {
    // 模拟加载
    setTimeout(() => {
      getAllData()
      uni.stopPullDownRefresh() // 停止下拉刷新
    }, 100)
  })

  const getAllData = () => {
    getAd()
    getGoods()
  }

  const toProdPage = (e) => {
    const prodid = e.currentTarget.dataset.prodid

    if (prodid) {
      uni.navigateTo({
        url: '/pages/prod/prod?goodsId=' + prodid
      })
    }
  }
  //跳转广告页
  const toAdPage = (e) => {
    const categoryId = e.currentTarget.dataset.categoryId
    const title = e.currentTarget.dataset.title
    const adLink = e.currentTarget.dataset.link
    console.log(adLink);
    console.log(adLink != null);
    if (adLink != null) {
      //跳转外部链接
      console.log("跳转外部广告");
      uni.openWebView({
        url: adLink,
      });
    }
    if (categoryId != null) {
      uni.navigateTo({
        url: '/pages/prod-classify/prod-classify?title=' + title + '&categoryId=' + categoryId
      })
    }
  }


  /**
   * 跳转搜索页
   */
  const toSearchPage = () => {
    uni.navigateTo({
      url: '/pages/search-page/search-page'
    })
  }

  /**
   * 跳转商品活动页面
   * @param e
   */
  const toClassifyPage = (e) => {
    let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
    const title = e.currentTarget.dataset.title
    const categoryId = e.currentTarget.dataset.categoryId

    if (title) {
      url += '&title=' + title
    }
    if (categoryId) {
      url += '&categoryId=' + categoryId
    }

    console.log("跳转URL：" + url)

    uni.navigateTo({
      url: url
    })
  }

  /**
   * 加载轮播图
   */
  const getAd = () => {
    http.request({
        url: '/ad',
        method: 'GET',
        data: {}
      })
      .then(({
        data
      }) => {
        Ad.value = data.records;
        console.log(Ad.value);
        console.log("轮播图");
        console.log(data);
      })
  }

const current=ref(1)

  /**
   * 加载商品列表
   */
  const getGoods = () => {
    http.request({
        url: '/goods/getGoodsList',
        method: 'GET',
        data: {}
      })
      .then(({
        data
      }) => {
        //定义一个列表
         let list=[];
        if (current.value == 1) {
          //首次获取
          list = data
        } else {
          //继续加载
          list = goodsList.value
          list = list.concat(data)
        }
        goodsList.value = list
      })

  }

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    current.value = current.value + 1
    getGoods()
  })
</script>

<style scoped lang="scss">
  @use './index.scss';
</style>
